<template>
<div 
    class="my-tabs"
    ref="MyTabs"
    :style="{
        gridTemplateColumns:getSlot().length>0?`repeat(${getSlot().length},${gridStyle=='equal'?'1fr':'max-content'})`:'',
    }">
    <slot></slot>
    <div
        v-show="show && activeIndex>=0"
        ref="ItemBg"
        class="my-tabs-active-item-bg">
    </div>
</div>
</template>
<script>
/*
 标签切换按钮组件
 提供类名供外部调整
 */
export default {
    name: 'MyTabSlot',
    props:{
        activeIndex:{  //当前选择的index
            type:Number,
            default:0,
        },
        gridStyle:{  //布局样式，等宽或自动
            type:String,
            default:'equal',
        },
    },
    data(){
        this.timer = undefined;
        return {
            show:false,  //控制背景块的显示
        };
    },
    watch:{
        activeIndex(){
            this.computedLocation();
        },
        gridStyle(){
            this.computedLocation();
        },
    },
    mounted(){
        this.computedLocation();
        window.addEventListener("resize",()=>{
            this.computedLocation();
        });
        this.timer = setInterval(()=>{
            if(!this.isActive()) return;
            this.computedLocation();
        },300);
    },
    methods:{
        isActive(){  //是否是当前活动的组件
            const el = this.$el;
            if(!el) return false;
            return !!(el.clientWidth || el.clientHeight);
        },
        getSlot(){  //获取slot，过滤空的元素
            if(!this.$slots.default) return [];
            return this.$slots.default.filter(item=>{
                return item.tag;
            });
        },
        computedLocation(){  //计算位置
            const MyTab = this.$refs.MyTabs;
            if(!MyTab) return;
            if(!this.isActive()) return;  //表示当前元素并未展示
            const ItemEls = new Array(...MyTab.children);
            ItemEls.pop();
            this.show = ItemEls.length>0;
            if(!ItemEls) return;
            const ItemBg = this.$refs.ItemBg;
            if(!ItemBg) return;
            if(this.activeIndex<0 || this.activeIndex>=ItemEls.length) return;
            let left = ItemEls[this.activeIndex].offsetLeft;
            let top = ItemEls[this.activeIndex].offsetTop;
            let transform = `translate(${left}px, ${top}px)`;
            let width = ItemEls[this.activeIndex].clientWidth + 'px';
            let height = ItemEls[this.activeIndex].clientHeight + 'px';
            if(ItemBg.style.transform != transform){
                ItemBg.style.transform = transform;
            }
            if(ItemBg.style.width != width){
                ItemBg.style.width = width;
            }
            if(ItemBg.style.height != height){
                ItemBg.style.height = height;
            }
        },
    },
    destroyed(){
        clearInterval(this.timer);
    },
}
</script>
<style scoped lang="scss">
.my-tabs {
    --my-tabs-padding:3px;
    --my-tabs-border-radius:5px;
    width: fit-content;
    height: fit-content;
    padding: var(--my-tabs-padding);
    box-sizing: border-box;
    background-color: rgb(240, 242, 245);
    border-radius: var(--my-tabs-border-radius);
    list-style: none;
    display: grid;
    position: relative;
    z-index: 0;
    line-height: 1;
    >.my-tabs-active-item-bg{
        position: absolute;
        height:0;
        width: 0;
        top: 0;
        left: 0;
        border-radius: var(--my-tabs-border-radius);
        transition: transform 0.3s,width 0.3s,height 0.3s;
        background-color: rgba(0,132,255,.08);
        pointer-events: none;
        z-index: -1;
    }
}
</style>
